<script setup>
import { ref } from 'vue'
import Modal from '@/components/Modal.vue'
import Button from '@/components/Button.vue'
import AntdIcon from '@/components/AntdIcon/index.vue'
import { message } from 'ant-design-vue'
import { sendGoodsOrInquiryRequestApi } from '@/api'
import { validEmail } from '@/utils/valid'

const modalRef = ref()
const state = ref({
  type: 'detail', // 默认为查看商品详情，email：为发送邮箱请求补货, inquiry: 为询价模式
  title: '商品详情',
  detail: '',
  spu: '',
  sku: '',
})
const email = ref('')

const submit = () => {
  validEmail('', email.value)
    .then(() => {
      let url = '/shop/goods/send_email' // 补货
      const params = {
        spu: state.value.spu,
        sku: state.value.sku,
        email: email.value,
      }
      if (state.value.type === 'inquiry') {
        url = '/shop/goods/send_price_inquiry_email' // 询价
      }
      sendGoodsOrInquiryRequestApi(url, params).then(() => {
        message.success('Submit Success')
        close()
      })
    })
    .catch((err) => {
      message.error(err)
    })
}

const open = (param) => {
  state.value = {
    ...state.value,
    ...param,
  }
  console.log(state.value)

  modalRef.value.open()
}
const close = () => {
  modalRef.value.close()
}
defineExpose({
  open,
  close,
})
</script>
<template>
  <Modal :title="state.title" ref="modalRef">
    <div class="modal-content p-3 pt-17">
      <!-- 查看详情模式 -->
      <div v-if="state.type === 'detail'">
        <div v-html="state.detail"></div>
      </div>
      <!-- 发送邮箱申请补货 || 询价模式询价模式 -->
      <div class="flex flex-col gap-3 items-center" v-else>
        <div class="text-xl">
          {{
            state.type === 'email'
              ? "We'll notify you once the item is available again"
              : 'Rare Jewel Dread Talisman'
          }}
        </div>
        <a-input v-model:value="email" placeholder="Email" :border="false" />
        <div class="text-2xl text-center">
          {{
            state.type === 'email'
              ? 'Assassin Traps Skill Charm'
              : "Confirm your price request via email and we'll let you know once this item has a price assigned, so you can buy it."
          }}
        </div>
        <div class="text-xl" v-if="state.type === 'email'">40 to Life</div>
        <Button bg="#f9a044" @click="submit">
          <span>SEND PRODUCT REQUEST</span>
          <AntdIcon icon="SendOutlined" />
        </Button>
      </div>
    </div>
  </Modal>
</template>
<style scoped>
.ant-input {
  border-radius: 0 !important;
  background-color: #f5f5f5;
  border: 1px solid #ccc !important;
  max-width: 400px;
}
</style>
